<template>
  <div :class="[
            'item',
            'flex',
            'items-center',
            'cursor-pointer',
            {'item--active':active}
          ]"
       @click.prevent="handleSelected">
    <el-checkbox :value="active"></el-checkbox>

    <div class="item--img"
         v-if="isIcon">
      <img :src="icon"
           v-if="icon"
           :title="title"
           alt="">
    </div>

    <div class="item__info flex-1 flex flex-col w-0">

      <ZTooltip :line="1"
                :content="title"
                v-if="title">
        <span style="color:#404040"
              class="item__info--title">{{title}}</span>
      </ZTooltip>
      <ZTooltip :line="1"
                :content="desc"
                v-if="desc">
        <span style="color:#808080"
              class="item__info--desc">{{desc}}</span>
      </ZTooltip>

    </div>

    <div class="item__eye flex items-center justify-center"
         v-if="isPreview">
      <img src="@/assets/mspbots/eye_show.png"
           :title="$t('preview')"
           @click.stop="handlePreview">
    </div>
  </div>
</template>

<script>
import EmitterMixin from '@/mixins/emitter'
import ZTooltip from '@/components/storybook/z-tooltip'

export default {
  name: 'Item',
  mixins: [EmitterMixin],
  components: {
    ZTooltip
  },
  props: {
    active: {
      type: Boolean,
      default: false
    },
    icon: {
      type: String
    },
    title: {
      type: String
    },
    desc: {
      type: String
    },
    isPreview: Boolean,
    isIcon: Boolean
  },

  methods: {
    handlePreview () {
      this.$emit('preview')
    },
    handleSelected () {
      this.$emit('selected')
    }
  }
}
</script>

<style lang="scss" scoped>
.item {
  width: 100%;
  height: 80px;
  background: #ffffff;
  border-radius: 4px;
  border: 1px solid #f0f0f0;
  padding: 20px 0 20px 20px;
  margin-bottom: 10px;
  transition: all 200ms;
  &--active {
    border-color: #138dc7;
  }
  .el-checkbox {
    margin-right: 24px;
  }
  &--img {
    width: 40px;
    height: 40px;
    margin-right: 24px;
    img {
      width: 100%;
      width: 100%;
    }
  }

  &__info {
    font-size: 14px;
    line-height: 20px;
  }

  &__eye {
    width: 54px;
    height: 60px;
    box-shadow: inset 1px 0px 0px 0px #f0f0f0;
    & > img {
      width: 14px;
      height: 14px;
    }
  }
}
</style>
